<template>
  <div class="content">
    <div class="bg-fff">
      <div  class="top-search">
        <div class="search-wrap">
          <span class="search">输入你要搜索的商品</span>
        </div>
        <div class="search-btn">搜索</div>
      </div>
      <div class="history">
        <div class="clearfix">
          <div class="his-tag">历史搜索记录</div>
          <div class="his-clear">清空</div>
        </div>
        <div class="history-con">
          <span>长城干红</span>
          <span>长城干红</span>
          <span>长城干红</span>
          <span>长城干红</span>
          <span>长城干红</span>
        </div>

        <div class="clearfix">
          <div class="his-tag">热门搜索</div>
          <div class="his-clear">换一批</div>
        </div>
        <div class="history-con">
          <span>茅台</span>
          <span>五粮液</span>
          <span>长城干红</span>
          <span>白酒</span>
          <span>五粮液</span>
        </div>
      </div>


    </div>


  </div>
</template>

<script>
  export default {
    components: {
    },
    data(){
      return {
      };
    },
    mounted(){

    },
    methods: {
    },
    filters: {}
  }
</script>


<style scoped>
  .content {
    text-align: left;
  }
  .top-search{
    border-bottom: 1px solid #f6f6f6;
    padding: .5rem;
  }
  .search-wrap {
    display: inline-block;
    width: 75%;
    border-radius: 1.5rem;
    background: #f6f6f6 .3rem center no-repeat;
  }
  .search {
    height: 1.5rem;
    line-height: 1.5rem;
    width: 100%;
    font-size: .6rem;
    color: #777;
    padding-left: 1.75rem;
    background: url("./images/mhss-icon.svg") .5rem no-repeat;
  }
  .search-btn{
    width: 20%;
    height: 1.5rem;
    line-height: 1.5rem;
    background: #E93B3D;
    border: 1px solid #E93B3D;
    border-radius: 5rem;
    font-size: .65rem;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-left: 2%;
  }

  .history{
    padding: .75rem .75rem 0;
    vertical-align: middle;
  }
  .his-tag{
    float: left;
    font-size: .7rem;
    color: #333;
  }
  .his-clear{
    float: right;
    font-size: .6rem;
    color: #E93B3D;
  }

  .history-con{
    padding:.5rem 0rem;
  }
  .history-con span{
    display:inline-block;
    font-size: .6rem;
    color:#666666;
    background:#f8f8f8;
    border: 1px solid #f8f8f8;
    border-radius: 5rem;
    padding:.2rem .5rem;
    margin-right:.5rem;
    margin-bottom:.5rem;
  }

</style>
